// 头部
import React from "react";
import { Button  } from "antd";
import { HighlightOutlined, SyncOutlined } from '@ant-design/icons';
// 添加动画效果
import { CSSTransition } from "react-transition-group";
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    SearchWrapper,
    SearchInfo,
    SearchInfoItem
} from "./style";
// 第三方: 连接
import { connect } from 'react-redux';
// 引用action规范
import {
    inputOnfocus,
    inputOnBlur,
    getList,
    nextTips,
    searchMouseEnter,
    searchMouseLeave,
    closeSpin
} from './store/actionCreators'

// 无状态组件
const Header = (props) => {
    let {
        isFocused,
        inputOnfocus,
        inputOnBlur,
        list,
        page,
        searchMouseEnter,
        searchMouseLeave,
        mouseIn,
        nextTips,
        spinStatus
    } = props;

    const searchInfo = (show, mouseIn) => {
        let newList = list.toJS();
        let pageList =[];
        if(newList.length){
            for (let i = (page - 1) *10; i < page * 10; i++){
                newList[i] && pageList.push(
                    <SearchInfoItem key={i}>{newList[i]}</SearchInfoItem>
                )
            }
        }

        if(show || mouseIn){
            return(
                <SearchInfo
                    onMouseEnter={searchMouseEnter}
                    onMouseLeave={searchMouseLeave}
                >
                    <div className="title">
                        热门搜索
                        <div
                            className="switch"
                            onClick={nextTips}
                        >
                            <SyncOutlined spin={spinStatus}/>
                            <span>换一批</span>
                        </div>
                    </div>
                    <ul>
                        { pageList }
                    </ul>
                    <div className='triangle'>
                    </div>
                </SearchInfo>
            )
        }else {
            return  null
        }

    };
    return(
        <HeaderWrapper>
            <Logo/>
            <Nav>
                <NavItem className='left active'>首页</NavItem>
                <NavItem className='left'>下载App</NavItem>
                <NavItem className='right'>登录</NavItem>
                <NavItem className='right'>Aa</NavItem>
                <SearchWrapper>
                    <CSSTransition
                        in={isFocused}
                        timeout={300}
                        classNames='slide'
                    >
                        <NavSearch
                            className={ isFocused ? 'isFocused' : ''}
                            onFocus={() => inputOnfocus(list)}
                            onBlur={inputOnBlur }
                        />
                    </CSSTransition>
                    <i className={ isFocused ? 'iconBg iconfont iconsousuo zoom' : 'iconfont iconsousuo zoom'} />
                    {
                        searchInfo(isFocused, mouseIn)
                    }
                </SearchWrapper>
            </Nav>
            <Addition>
                <Button className="register proButton">
                    注册
                </Button>
                <Button
                    className="write proButton"
                    icon={ <HighlightOutlined /> }
                >
                    写文章
                </Button>
            </Addition>

        </HeaderWrapper>
    )
};


// react-redux 数据和方法
// 映射store数据
const mapStateToProps = (state) =>{
    const headerStore = state.get('header');
    return {
        isFocused: headerStore.get('focused'),
        list: headerStore.get('list'),
        totalPage: headerStore.get('totalPage'),
        page: headerStore.get('page'),
        mouseIn: headerStore.get('mouseIn'),
        spinStatus: headerStore.get('spinStatus'),
    }
};
// 映射store方法
const mapDispatchToProps = (dispatch) => {
    return {
        // 获得焦点
        inputOnfocus(list) {
            // list.size 有值证明已经请求过了
            list.size === 0 && getList(dispatch);
            dispatch(inputOnfocus());
        },
        // 失去焦点
        inputOnBlur()  {
            const action = inputOnBlur();
            dispatch(action);
        },
        searchMouseEnter() {
            dispatch(searchMouseEnter());
        },
        searchMouseLeave() {
            dispatch(searchMouseLeave())
        },
        nextTips() {
            dispatch(nextTips());
            setTimeout(() => {
                dispatch(closeSpin())
            }, 300)
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Header)
